<template>
  <div class="btn_container">
    <span class="plus_text">+</span>
    <div class="btnGroupBox">
      <div class="addBtnGroup">
        <ActionButton
          iconText="审批节点"
          :activeIcon="sp1"
          :unActiveIcon="sp2"
          @handleClick="$emit('handleAdd', 'E')"
        />
        <ActionButton
          iconText="子流程"
          :activeIcon="zlc1"
          :unActiveIcon="zlc2"
          @handleClick="$emit('handleAdd', 'S')"
        />
        <ActionButton
          :disabled="branchDisabled"
          iconText="条件分支"
          :activeIcon="tj1"
          :unActiveIcon="tj2"
          @handleClick="$emit('handleAdd', 'C_BRANCH')"
        />
        <ActionButton
          :disabled="branchDisabled"
          iconText="分流/合流"
          :activeIcon="fl1"
          :unActiveIcon="fl2"
          @handleClick="$emit('handleAdd', 'E_BRANCH')"
        />
        <ActionButton
          iconText="定时器"
          :activeIcon="js1"
          :unActiveIcon="js2"
          @handleClick="$emit('handleAdd', 'T')"
        />
      </div>
      <div class="arrows"></div>
    </div>
  </div>
</template>

<script>
import ActionButton from "./ActionButton.vue";
export default {
  props: {
    branchDisabled: {
      default: false,
      type: Boolean,
    },
  },
  components: {
    ActionButton,
  },
  data() {
    return {
      sp1: require("../../assets/sp1.png"),
      sp2: require("../../assets/sp2.png"),
      zlc1: require("../../assets/zlc1.png"),
      zlc2: require("../../assets/zlc2.png"),
      tj1: require("../../assets/tj1.png"),
      tj2: require("../../assets/tj2.png"),
      fl1: require("../../assets/fl1.png"),
      fl2: require("../../assets/fl2.png"),
      js1: require("../../assets/js1.png"),
      js2: require("../../assets/js2.png"),
    };
  },

  methods: {
    addItem(type) {
      // this.$emit()
      console.log(1111, type);
    },
  },
};
</script>

<style scoped>
.btn_container {
  z-index: 9999;
  position: relative;
  background: #4989f2;
  height: 30px;
  width: 30px;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.plus_text {
  color: #fff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 20px;
  width: 20px;
  font-size: 20px;
  user-select: none;
}

.btnGroupBox {
  position: absolute;
  left: 27px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 20px solid transparent;
  display: none;
}
.btn_container:hover {
  box-shadow: 0 0 10px #4989f2;
}
.btn_container:hover .btnGroupBox {
  display: block;
}

.addBtnGroup {
  display: flex;
  flex-direction: row;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 0 10px #fff;
}

.arrows {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-right: 10px solid #fff;
  border-bottom: 10px solid transparent;
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
}
</style>